<template>
    <div class="nav-container bg-primary pb-[3rem] px-[1rem]  pointer-events-auto menu-panel w-full clip-top fixed top-0 left-0 right-0 margin-px-1 z-[2] duration-300 ease-in-out transition-[clip-path]"
        :style="{ 'clip-path': isShowMenu ? 'inset(0 0 0 0)' : 'inset(0 0 100% 0)' }">
        <nav class="nav-box flex align-center justify-center pt-[75px] pb-[25px]">
            <ul class="nav-list flex align-center justify-center gap-x-[80px] font-exp uppercase font-12-exp">
                <li class="inline-flex justify-start gap-x-10 !text-inverted">
                    <NuxtLink class="flicker-hover flex-center" to="/products">
                        <figure class="inline-block">[</figure>
                        <span class="inline-block uppercase">Products</span>
                        <figure class="inline-block">]</figure>
                    </NuxtLink>
                </li>
                <li class="inline-flex justify-start gap-x-10 !text-inverted">
                    <NuxtLink class="flicker-hover flex-center" to="/careers">
                        <figure class="inline-block">[</figure>
                        <span class="inline-block uppercase">Careers</span>
                        <figure class="inline-block">]</figure>
                    </NuxtLink>
                </li>
                <li class="inline-flex justify-start gap-x-10 !text-inverted">
                    <NuxtLink class="flicker-hover flex-center" to="/team">
                        <figure class="inline-block">[</figure>
                        <span class="inline-block uppercase">Team</span>
                        <figure class="inline-block">]</figure>
                    </NuxtLink>
                </li>
                <li class="inline-flex justify-start gap-x-10 !text-inverted">
                    <NuxtLink class="flicker-hover flex-center" to="/research">
                        <figure class="inline-block">[</figure>
                        <span class="inline-block uppercase">Research</span>
                        <figure class="inline-block">]</figure>
                    </NuxtLink>
                </li>
                <li class="inline-flex justify-start gap-x-10 !text-inverted">
                    <NuxtLink class="flicker-hover flex-center" to="/blog">
                        <figure class="inline-block">[</figure>
                        <span class="inline-block uppercase">Blog</span>
                        <figure class="inline-block">]</figure>
                    </NuxtLink>
                </li>
            </ul>
        </nav>
    </div>
</template>
<script setup>
defineProps({
    isShowMenu: {
        type: Boolean,
        default: false,
    },
});
</script>
<style lang="scss" scoped>
@media (max-width: 768px) {
    .nav-container {
        .nav-box {
            @apply pt-[160px];

            .nav-list {
                @apply flex-col;

                li {
                    @apply my-2;
                }
            }
        }
    }
}
</style>